<!--  -->
<template>
  <div style="width: 100%; height: 600px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "barChart",
  props: {
    saledata: Array,
  },
  data() {
    return {};
  },
  components: {},
  computed: {},
  watch: {
    saledata: {
      deep: true,
      handler(val) {
        this.setOption(val);
      },
    },
  },
  beforeMount() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    setOption(saledata) {
      const xdata = [];
      const ydata = [];
      if (saledata) {
        saledata.forEach((element) => {
          xdata.push(element.name);
          ydata.push(element.value);
        });
      }

      const opt = {
        xAxis: {
          type: "category",
          data: xdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: ydata,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            label: {
              show:true,
              position: 'top',
              formatter: "{c}",
            },
          },
        ],
      };
      this.chart.setOption(opt);
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOption(this.saledata);
    },
  },
};
</script>

<style lang='' scoped>
</style>